<template>
  <div class="index" ref="index">
    <div class="index-wrapper">
      <header class="header">
        <div class="logo"></div>
        <p class="header-description-ch">最值得信賴的多幣種加密數字貨幣交易平台</p>
        <p class="header-description-en">THE MOST RELIABLE MULTI-CRYPTOCURRENCY<br>TRADING PLATFORM</p>
      </header>
      <section class="index-body">
        <div class="index-body-content">
          <div class="avatar-container">
            <div class="avatar"></div>
          </div>
          <p class="host-number">{{email | emailFilter}}</p>
          <p class="welcome-description">邀請您加入CHAOEX</p>
          <div class="join-btn-wrapper">
            <el-button class="join-btn" type="primary" @click="join">立即加入</el-button>
          </div>
          <div class="copywriting">
            <p>我們將不定期向註冊用戶空頭糖果</p>
            <p>總量有限，先到先得，具體請關注官方動態</p>
          </div>
        </div>
        <div class="bg-envelop-mask">
          <div class="bg-envelop-inner"></div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import getLocationQuery from '@/utils/getLocationQuery'
// import { personalInfo } from '@/utils/request'
export default {
  name: 'index',
  data () {
    return {
      logo: '',
      email: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.filterLocationQuery()
      this._initScroll()
    })
  },
  methods: {
    _initScroll () {
      this.indexScroll = new this.$BScroll(this.$refs.index, {
        click: true
      })
    },
    join () {
      this.$router.push({
        name: 'login'
      })
    },
    filterLocationQuery () {
      const locationQueryJson = getLocationQuery()
      if (locationQueryJson.email) {
        this.email = locationQueryJson.email
      }
    }
  },
  filters: {
    emailFilter (value) {
      if (value) {
        return value.substring(0, 3) + '****' + value.substr(value.length - 4)
      } else {
        return 'CHAOEX'
      }
    }
  }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.index {
  .index-wrapper {
    padding-top: 59px;
    .header {
      margin: 0 0 23px;
      .header-description-ch {
        margin: 0 auto 21px;
        font-size: 32px;
        color: rgba(255, 255, 255, 1);
        line-height: 32px;
        text-align: center;
      }
      .header-description-en{
        margin: 0 auto;
        font-size:22px;
        color:rgba(255,255,255,1);
        line-height:28px;
        text-align: center;
      }
    }
    .index-body{
      box-sizing: border-box;
      .index-body-content{
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        margin: 0 34px 0 38px;
        padding: 59px 73px 202px;
        background: #fff;
      }
      .avatar-container{
        width: 140px;
        height: 174px;
        margin: 0 auto 58px;
      }
      .host-number{
        height: 36px;
        font-size:46px;
        color: rgba(234,185,0,1);
        line-height: 36px;
        text-align: center;
        margin-bottom: 22px;
      }
      .welcome-description{
        height:36px;
        font-size:34px;
        color:rgba(234,185,0,1);
        line-height:36px;
        text-align: center;
        margin-bottom: 83px;
      }
      .join-btn-wrapper{
        text-align: center;
        margin-bottom: 38px;
      }
      .join-btn{
        width: 100%;
        height: 91px;
        border: none;
        border-radius: 46px;
        font-size:36px;
        color: #fff;
        background: linear-gradient(to right, #1293FF, #6FBDFF);
        box-shadow: 0px 0px 4px 4px rgba(24,150,255,0.58)
      }
      .copywriting p{
        font-size: 26px;
        color: rgba(29,64,180,1);
        line-height: 36px;
        text-align: center;
      }
    }
    .bg-envelop-mask{
      position: relative;
      height: 0;
    }
  }
}

.logo {
  width: 158px;
  height: 138px;
  margin: 0 auto 37px;
  background: url("../assets/images/logo.png") no-repeat;
  background-size: cover;
}
.bg-envelop-inner{
  position: absolute;
  left: 0;
  top: -202px;
  width: 100%;
  height: 202px;
  background: url("../assets/images/envelope.png") no-repeat;
  background-size: cover;
}

.avatar{
  width: 100%;
  height: 100%;
  background: url("../assets/images/invite.png") no-repeat;
  background-size: cover;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .logo
    background-image: url("../assets/images/logo@2x.png");
    background-size: cover;
  .bg-envelop-inner
    background-image: url("../assets/images/envelope@2x.png");
    background-size: cover;
  .avatar
    background-image: url("../assets/images/invite@2x.png");
    background-size: cover;

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  .logo
    background-image: url("../assets/images/logo@3x.png");
    background-size: cover;
  .bg-envelop-inner
    background-image: url("../assets/images/envelope@3x.png");
    background-size: cover;
  .avatar
    background-image: url("../assets/images/invite@3x.png");
    background-size: cover;
</style>
